import React from 'react';
import { Button, Tooltip } from 'antd';
import classNames from 'classnames';
import { EditOutlined, HourglassOutlined, ShoppingOutlined } from '@ant-design/icons';

import { LayerTypeBE } from '../../../../constant';
import { OperationType } from '@/pages/TemplateEditor/constant';

import ButtonIconWrapper from './ButtonIconWrapper';

import styles from './index.module.less';

interface Props {
  disableNewLayer: boolean;
  disableProductLayer: boolean;
  operationType: OperationType;
  onAddLayer: (type: LayerTypeBE) => void;
}

const Buttons = ({
  operationType,
  disableNewLayer,
  disableProductLayer,
  onAddLayer
}: Props): JSX.Element => {
  return (
    <>
      <div className="flex justify-center content-center gap-x-2">
        <Tooltip
          title={
            disableProductLayer
              ? 'Max 4 Products'
              : 'Allow local designer to change during creative generation.'
          }
        >
          <Button
            disabled={disableNewLayer || disableProductLayer}
            className={classNames(
              'flex',
              'items-center',
              'justify-center',
              styles['add-layer-btn']
            )}
            icon={<ShoppingOutlined />}
            onClick={(): void => onAddLayer(LayerTypeBE.Product)}
          >
            Add Product
          </Button>
        </Tooltip>
        <Tooltip
          defaultOpen={operationType === OperationType.Create}
          title="Use this button to add background image / logo"
        >
          <Button
            disabled={disableNewLayer}
            className={classNames(
              'flex',
              'items-center',
              'justify-center',
              styles['add-layer-btn']
            )}
            icon={
              <ButtonIconWrapper>
                123
              </ButtonIconWrapper>
            }
            onClick={(): void => onAddLayer(LayerTypeBE.Image)}
          >
            Add image
          </Button>
        </Tooltip>
      </div>
      <div className="flex justify-center content-center gap-x-2 mt-2">
        <Button
          disabled={disableNewLayer}
          className={classNames(
            'flex',
            'items-center',
            'justify-center',
            styles['add-layer-btn']
          )}
          icon={
            <ButtonIconWrapper>
              <EditOutlined />
            </ButtonIconWrapper>
          }
          onClick={(): void => onAddLayer(LayerTypeBE.Text)}
        >
          Add text
        </Button>
        <Button
          disabled={disableNewLayer}
          className={classNames(
            'flex',
            'items-center',
            'justify-center',
            styles['add-layer-btn']
          )}
          icon={
            <ButtonIconWrapper>
              <HourglassOutlined />
            </ButtonIconWrapper>
          }
          onClick={(): void => onAddLayer(LayerTypeBE.Shape)}
        >
          Add shape
        </Button>
      </div>
    </>
  );
};

export default Buttons;
